<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

        <title>SpringMVCShowCases</title>

        <meta http-equiv="Content-Language" content="zh-cn" />
        <meta http-equiv="Window-target" content="_top" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <style type="text/css">
            .ajax-loading {                  
                position: fixed;           
                _position: absolute;       
                top: 55%;                  
                left: 55%;                 
                width: 124px;              
                height: 124px;             
                overflow: hidden;          
                background: url("/static/springframework/img/ajax_loading.gif") no-repeat;
                z-index: 7;             
                margin: -62px 0 0 -62px;
            } 
        </style>

        <link href="<c:url value="/static/bootstrap/css/bootstrap.min.css?v2.3.0" />" rel="stylesheet"  type="text/css" />
        <script src="<c:url value="/static/jquery/js/jquery-1.9.0.min.js?v1.9.0" />" type="text/javascript"></script> 
        <script src="<c:url value="/static/bootstrap/js/bootstrap.min.js?v2.3.0" />" type="text/javascript"></script> 

        <meta name="_csrf" content="${_csrf.token}"/>
        <meta name="_csrf_header" content="${_csrf.headerName}"/>
    </head>

    <body>
        <div class="container-fluid" id="id_container">
            <div class="row-fluid">
                <div class="span9">
                    <div>
                        <ul class="nav nav-tabs" style="font-size:15px;font-weight:bold;">
                            <li role="presentation" class="tab_div active" title="simple" ><a href="#simple" data-toggle="tab">Simple</a></li>
                            <li role="presentation" class="tab_div" title="fileupload"><a href="#fileupload" data-toggle="tab">FileUpload</a></li>
                            <li role="presentation" class="tab_div" title="data"><a href="#data" data-toggle="tab">Data</a></li>
                            <li role="presentation" class="tab_div" title="responses"><a href="#responses" data-toggle="tab">Response</a></li>
                            <li role="presentation" class="tab_div" title="messageconverters"><a href="#messageconverters" data-toggle="tab">Messageconverters</a></li>
                            <li role="presentation" class="tab_div" title="views"><a href="#views" data-toggle="tab">Views</a></li>
                            <li role="presentation" class="tab_div" title="validation"><a href="#validation" data-toggle="tab">Validation</a></li>
                            <li role="presentation" class="tab_div" title="exceptions"><a href="#exceptions" data-toggle="tab">Exceptions</a></li>
                            <li role="presentation" class="tab_div" title="redirect"><a href="#redirect" data-toggle="tab">Redirect</a></li>
                            <li role="presentation" class="tab_div" title="async"><a href="#async" data-toggle="tab">Async</a></li>
                        </ul>
                    </div>

                    <div class="tab-content">
                        <div class="tab-pane active" id="simple">
                            <h2>Simple</h2>
                            <h4>See the com.walterlife.springmvc.simple package for the @Controller code</h4>
                            <p><button class="btn btn-link" id="simpleLink" url="<c:url value="/simple"/>" >1. GET /simple</button></p>
                            <p><button class="btn btn-link" id="simpleRevisitedLink" url="<c:url value="/simple/revisited"/>" >2. GET /simple/revisited</button></p>
                        </div>
                        <div class="tab-pane" id="fileupload">
                            <p>FileUpload</p>
                        </div>
                        <div class="tab-pane" id="data">
                            <p>Data</p>
                        </div>
                        <div class="tab-pane" id="responses">
                            <p>Responses</p>
                        </div>
                        <div class="tab-pane" id="messageconverters">
                            <p>Messageconverters</p>
                        </div>
                        <div class="tab-pane" id="views">
                            <p>Views</p>
                        </div>
                        <div class="tab-pane" id="validation">
                            <p>Validation</p>
                        </div>
                        <div class="tab-pane" id="exceptions">
                            <p>Exceptions</p>
                        </div>
                        <div class="tab-pane" id="redirect">
                            <p>Redirect</p>
                        </div>
                        <div class="tab-pane" id="async">
                            <p>Async</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">

        </script>

        <script type="text/javascript">
            $(document).ready(function() {
                $("li.tab_div.active").click();
                
                $("button.btn.btn-link").click(function() {
                    var $link = $(this);
                    var url = $link.attr('url')+'/?name=walter';
                    $.get(url, function(data) {
                        var resultDataId = $link.attr('id') + 'Response';
                        var $resultData = $('<div class="alert alert-success"><a href="#" class="close" data-dismiss="alert">&times;</a>'+data+'</div>');
                        $link.parent().append($resultData);

                        console.log(data);
                        console.log($resultData);
                        $resultData.fadeIn('slow');
                    });
                });
            });
        </script>

    </body>
</html>
